<template>
  <div class="article-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="main-title">Dook学院公告栏</h1>
      <p class="sub-title">查看最新学院通知与公告</p>
    </div>

    <div class="content-layout">
      <!-- 左侧边栏 -->
      <div class="sidebar left-sidebar">
        <div class="sidebar-card">
          <div class="sidebar-header">
            <i class="el-icon-data-line"></i>
            <span>公告统计</span>
          </div>
          <div class="sidebar-body">
            <div class="stat-item">
              <div class="stat-value">{{ total }}</div>
              <div class="stat-label">公告总数</div>
            </div>
            <el-divider></el-divider>
          </div>
        </div>
      </div>

      <!-- 中间主内容区 -->
      <div class="main-content-area">
        <!-- 搜索框 -->
        <div class="search-box">
          <el-input
            v-model="searchInput"
            placeholder="搜索公告内容..."
            prefix-icon="el-icon-search"
            clearable>
          </el-input>
          <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
        </div>

        <!-- 公告列表 -->
        <div class="article-list-container">
          <div class="article-list" ref="articleList">
            <div v-for="(item, index) in allItems" :key="index" class="article-item" @click="selectAndOpenDrawer(item)">
              <div class="article-content">
                <div class="article-meta">
                  <span class="article-date">{{ formatDate(item.createTime) }}</span>
                  <el-tag size="small" effect="plain" type="info">公告</el-tag>
                </div>
                <h2 class="article-title">{{ item.title }}</h2>
                <div class="article-info">
                  <span class="article-author">
                    <i class="el-icon-user"></i> {{ item.guserName }}
                  </span>
                </div>
              </div>
              <div class="article-arrow">
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>

            <!-- 无数据展示 -->
            <div v-if="allItems.length === 0 && !loading" class="empty-data">
              <i class="el-icon-document"></i>
              <p>暂无公告</p>
            </div>
          </div>
        </div>

        <!-- 分页组件 -->
        <div class="pagination-wrapper">
          <div class="pagination">
            <el-pagination
                :page-size.sync="pageSize"
                :current-page.sync="currentPage"
                layout="prev, pager, next, total"
                :total="total"
                background
                @current-change="getArticleList"/>
          </div>
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="sidebar right-sidebar">
        <div class="sidebar-card">
          <div class="sidebar-header">
            <i class="el-icon-time"></i>
            <span>学院日历</span>
          </div>
          <div class="sidebar-body calendar-container">
            <div class="calendar-header">
              <div class="current-month">{{ currentMonth }}</div>
            </div>
            <div class="weekdays">
              <div v-for="day in weekdays" :key="day" class="weekday">{{ day }}</div>
            </div>
            <div class="calendar-grid">
              <div
                v-for="day in calendarDays"
                :key="day.date"
                class="calendar-day"
                :class="{
                  'current-day': day.isToday,
                  'other-month': !day.isCurrentMonth,
                  'has-event': day.hasEvent
                }"
              >
                {{ day.dayNumber }}
                <div v-if="day.hasEvent" class="event-indicator"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 抽屉 -->
    <el-drawer
        :title="selectedRow.title"
        :visible.sync="drawer"
        :direction="direction"
        :size="drawerSize"
        custom-class="announcement-drawer">
      <div class="announcement-container">
        <div class="announcement-header">
          <h1 class="title">{{ selectedRow.title }}</h1>
          <div class="announcement-meta">
            <div class="meta-item">
              <i class="el-icon-user"></i>
              <span>{{ selectedRow.guserName }}</span>
            </div>
            <div class="meta-item">
              <i class="el-icon-time"></i>
              <span>{{ selectedRow.createTime }}</span>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="announcement-content">
          <p v-html="selectedRow.content"></p>
        </div>
        <div class="announcement-footer">
          <el-button type="text" icon="el-icon-back" @click="drawer = false">返回列表</el-button>
        </div>
      </div>
    </el-drawer>

    <div v-if="loading" class="loading-overlay"><loading/></div>
  </div>
</template>

<script>
import {getBulletin, getContent} from "@/api/api";
import Loading from "@/components/Loading.vue";

export default {
    name: 'Laucher',
    components: {Loading},
    data() {
        return {
            isreading:false,
            searchInput: '',
            allItems: [],
            currentPage: 1,
            pageSize: 3,
            total: 0,
            drawer: false,
            direction: 'rtl',
            selectedRow: {title:"无数据",content:"无数据"},
            drawerSize: '50%',
            filteredItems: [],
            loading:false,
            // 日历数据
            weekdays: ['日', '一', '二', '三', '四', '五', '六'],
            calendarDays: []
        }
    },
    computed: {
        currentMonth() {
            const now = new Date();
            return `${now.getFullYear()}年${now.getMonth() + 1}月`;
        }
    },
    created() {
        // 从 localStorage 中读取分页状态
        const savedPage = localStorage.getItem('bulletinCurrentPage');
        if (savedPage) {
            this.currentPage = parseInt(savedPage, 10);
        }

        this.getArticleList();
        this.generateCalendar();
    },
    beforeDestroy() {
        // 将当前分页状态保存到 localStorage
        localStorage.setItem('bulletinCurrentPage', this.currentPage);
    },
    methods: {
        async getArticleList() {
            this.loading = true;
            const response = await getBulletin(
                {
                    PageNumber: this.currentPage,
                    PageSize: this.pageSize
                });
            if (response && response.data && response.data.message === "成功") {
                this.allItems = response.data.data.list;
                this.total = response.data.data.total;
                this.loading = false;
            } else {
                this.$message.error("公告列表加载失败");
                this.loading = false;
            }
        },
       async selectAndOpenDrawer(item) {
            this.loading = true;
            const response = await getContent({
                params: {
                    id: item.contentId,
                },
            });
            this.isreading=true;
            this.selectedRow =response.data;
            this.drawer = true;
            this.loading = false;
        },
        async onSearch() {
            this.loading = true;
            // 搜索功能实现
            const response = await getBulletin({
                PageNumber: 1, // 搜索时重置到第一页
                PageSize: this.pageSize,
                title: this.searchInput // 增加搜索条件
            });

            if (response && response.data && response.data.message === "成功") {
                this.allItems = response.data.data.list;
                this.total = response.data.data.total;
                this.currentPage = 1; // 重置当前页为第一页
            } else {
                this.$message.error("搜索失败");
            }
            this.loading = false;
        },
        formatDate(dateString) {
          if (!dateString) return '';
          const date = new Date(dateString);
          const now = new Date();
          const diffTime = Math.abs(now - date);
          const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

          if (diffDays === 0) {
            return '今天';
          } else if (diffDays === 1) {
            return '昨天';
          } else if (diffDays < 7) {
            return `${diffDays}天前`;
          } else {
            return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
          }
        },
        generateCalendar() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth();

            // 获取当月第一天是星期几
            const firstDay = new Date(year, month, 1).getDay();

            // 获取当月天数
            const daysInMonth = new Date(year, month + 1, 0).getDate();

            // 获取上个月的天数
            const daysInLastMonth = new Date(year, month, 0).getDate();

            const calendarDays = [];

            // 上个月的日期
            for (let i = firstDay - 1; i >= 0; i--) {
                calendarDays.push({
                    date: `${year}-${month === 0 ? 12 : month}-${daysInLastMonth - i}`,
                    dayNumber: daysInLastMonth - i,
                    isCurrentMonth: false,
                    isToday: false,
                    hasEvent: Math.random() > 0.8 // 随机生成事件标记
                });
            }

            // 当月的日期
            const currentDate = now.getDate();
            for (let i = 1; i <= daysInMonth; i++) {
                calendarDays.push({
                    date: `${year}-${month + 1}-${i}`,
                    dayNumber: i,
                    isCurrentMonth: true,
                    isToday: i === currentDate,
                    hasEvent: Math.random() > 0.8 // 随机生成事件标记
                });
            }

            // 计算需要显示的下个月天数
            const nextMonthDays = 42 - calendarDays.length;

            // 下个月的日期
            for (let i = 1; i <= nextMonthDays; i++) {
                calendarDays.push({
                    date: `${year}-${month + 2}-${i}`,
                    dayNumber: i,
                    isCurrentMonth: false,
                    isToday: false,
                    hasEvent: Math.random() > 0.8 // 随机生成事件标记
                });
            }

            this.calendarDays = calendarDays;
        },
    }
}
</script>

<style scoped>
.article-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    position: relative;
    background-color: #f7f9fc;
    min-height: calc(100vh - 60px);
    background: linear-gradient(145deg, #f9f9ff 0%, #f5f7ff 100%);
    overflow-x: hidden;
}

.page-header {
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
    max-width: 1200px;
}

.page-header h1.main-title {
    font-size: 32px;
    color: transparent;
    margin-bottom: 8px;
    font-weight: 600;
    background: linear-gradient(to right, #5e72e4, #825ee4);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 1px 1px 3px rgba(94, 114, 228, 0.1);
}

.page-header p.sub-title {
    font-size: 16px;
    color: #525f7f;
    margin-bottom: 10px;
}

.content-layout {
    display: flex;
    width: 100%;
    max-width: 1200px;
    gap: 20px;
}

/* 侧边栏样式 */
.sidebar {
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(94, 114, 228, 0.15);
    overflow: hidden;
}

.sidebar-header {
    background: linear-gradient(to right, #5e72e4, #825ee4);
    color: white;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.sidebar-header i {
    margin-right: 8px;
    font-size: 18px;
}

.sidebar-body {
    padding: 15px;
}

/* 统计卡片样式 */
.stat-item {
    text-align: center;
    padding: 10px 0;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #5e72e4;
}

.stat-label {
    font-size: 14px;
    color: #525f7f;
    margin-top: 5px;
}

/* 日历样式 */
.calendar-container {
    padding: 10px;
}

.calendar-header {
    text-align: center;
    margin-bottom: 10px;
}

.current-month {
    font-size: 16px;
    font-weight: 600;
    color: #5e72e4;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 10px;
}

.weekday {
    text-align: center;
    font-size: 12px;
    color: #525f7f;
    padding: 5px 0;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-day {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 4px;
    position: relative;
    color: #606266;
    cursor: pointer;
}

.calendar-day.current-day {
    background: linear-gradient(to right, #5e72e4, #825ee4);
    color: white;
    font-weight: 600;
}

.calendar-day.other-month {
    color: #C0C4CC;
}

.event-indicator {
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #825ee4;
}

/* 主内容区样式 */
.main-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 600px;
    position: relative;
}

.search-box {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.search-box .el-input {
    margin-right: 15px;
}

.search-box .el-input >>> .el-input__inner {
    border-radius: 20px;
    height: 44px;
    padding-left: 20px;
    box-shadow: 0 2px 12px rgba(94, 114, 228, 0.04);
    border: 1px solid rgba(94, 114, 228, 0.2);
}

.search-box .el-button {
    border-radius: 20px;
    padding: 12px 25px;
    font-weight: 600;
    background: linear-gradient(to right, #5e72e4, #825ee4);
    box-shadow: 0 4px 6px rgba(94, 114, 228, 0.25);
    transition: all 0.3s;
}

.search-box .el-button:hover {
    background: linear-gradient(to right, #4b5ecc, #7050cc);
    box-shadow: 0 6px 10px rgba(94, 114, 228, 0.3);
    transform: translateY(-1px);
}

.article-list-container {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.article-list {
    width: 100%;
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.article-item {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(94, 114, 228, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    position: relative;
    border-left: 5px solid #5e72e4;
}

.article-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(94, 114, 228, 0.25);
}

.article-content {
    flex: 1;
    overflow: hidden;
}

.article-title {
    font-size: 18px;
    font-weight: 600;
    color: #32325d;
    margin: 10px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.article-date {
    font-size: 13px;
    color: #525f7f;
}

.article-info {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #5e72e4;
}

.article-author {
    display: flex;
    align-items: center;
}

.article-author i {
    margin-right: 5px;
    color: #825ee4;
}

.article-arrow {
    color: #5e72e4;
    font-size: 20px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.article-item:hover .article-arrow {
    opacity: 1;
    transform: translateX(0);
}

.pagination-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.pagination {
    display: inline-block;
}

/* 完全重置Element UI分页组件的样式 */
.pagination >>> .el-pagination {
    background-color: white;
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 4px 12px rgba(94, 114, 228, 0.15);
}

/* 设置分页按钮的基本样式 */
.pagination >>> .el-pagination.is-background .el-pager li,
.pagination >>> .el-pagination.is-background .btn-next,
.pagination >>> .el-pagination.is-background .btn-prev {
    background-color: #f5f7ff;
    color: #606266;
    margin: 0 3px;
    border-radius: 8px;
    border: 1px solid #ebeef5;
}

/* 设置激活页码的样式 */
.pagination >>> .el-pagination.is-background .el-pager li.active {
    background-color: #5e72e4;
    color: white;
    border-color: #5e72e4;
}

/* 设置悬停样式 */
.pagination >>> .el-pagination.is-background .el-pager li:hover:not(.active),
.pagination >>> .el-pagination.is-background .btn-next:hover,
.pagination >>> .el-pagination.is-background .btn-prev:hover {
    color: #5e72e4;
    background-color: #eaedff;
}

/* 公告详情样式 */
.announcement-drawer >>> .el-drawer__header {
    padding: 20px;
    margin-bottom: 0;
    border-bottom: 1px solid #EBEEF5;
    font-size: 18px;
    font-weight: 600;
    color: #5e72e4;
}

.announcement-container {
    padding: 0 30px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.announcement-header {
    padding: 20px 0;
}

.title {
    font-size: 28px;
    font-weight: 600;
    color: #32325d;
    margin-bottom: 15px;
    line-height: 1.4;
}

.announcement-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
    color: #525f7f;
}

.meta-item {
    display: flex;
    align-items: center;
}

.meta-item i {
    margin-right: 5px;
    color: #825ee4;
}

.announcement-content {
    flex: 1;
    padding: 25px;
    margin: 20px 0;
    background: #f8f9fc;
    border-radius: 10px;
    overflow-y: auto;
    font-size: 16px;
    line-height: 1.8;
    color: #32325d;
}

.announcement-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.announcement-footer .el-button {
    color: #5e72e4;
}

.announcement-footer .el-button:hover {
    color: #825ee4;
}

.empty-data {
    padding: 40px 0;
    text-align: center;
    color: #525f7f;
}

.empty-data i, .empty-data-small i {
    font-size: 48px;
    margin-bottom: 10px;
    color: #825ee4;
}

.empty-data-small {
    padding: 20px 0;
    text-align: center;
    color: #525f7f;
}

.empty-data-small i {
    font-size: 24px;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .content-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-card {
        flex: 1;
        min-width: 250px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        flex-direction: column;
    }

    .sidebar-card {
        width: 100%;
    }
}
</style>
